<template>
  <div class="about">
    <h1>warning</h1>
    <p><span @click="del">-</span>{{ count }}<span @click="add">+</span></p>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { computed, onUpdated, watchEffect } from "vue";

export default {
  setup() {
    const store = useStore();
    const count = computed(() => store.getters["getCount"]);

    const add = () => {
      store.dispatch("add");
    };
    const del = () => {
      store.dispatch("del");
    };

    // 生命周期
    onUpdated(() => {
      // console.log("updated!");
    });

    // wathc
    watchEffect(() => {
      // console.log(count.value);
    });

    return {
      count,
      add,
      del,
    };
  },
};
</script>

<style lang="less">
.about {
  span {
    display: inline-block;
    background: #eee;
    color: #000000;
    width: 20px;
    height: 24px;
    line-height: 24px;
    margin: 0 20px;
    cursor: pointer;
    user-select: none;
  }
}
</style>
